import logo from "../../assets/logo.png";
import "./index.scss";
import { Button, Checkbox, Form, Input } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { message } from "antd";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { login } from "../../store/actions/index";
import { useEffect,useRef } from "react";
import { getToken } from "../../utils/auth";
import * as THREE from 'three';
import WAVES from 'vanta/dist/vanta.waves.min'; // 导入需要的 VANTA 特效
const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const vantaRef = useRef(null);
  useEffect(() => {
    
    if (getToken()) {
      navigate(-1);
    }
  });
  useEffect(() => {
    const vantaEffect = WAVES({
      el: vantaRef.current,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
    });

    return () => {
      if (vantaEffect) {
        vantaEffect.destroy();
      }
    };
  }, []);


  const onFinish = async (values) => {
    const { mobile, code } = values;
    try {
      await dispatch(login(mobile, code));
      message.success("登录成功");
      navigate("/home");
    } catch (e) {
      message.error(e.response?.data?.message || "登录失败");
    }
  };

  return (
    <div className="login">
      <div ref={vantaRef} style={{ width: '100vw', height: '100vh' }}></div>
      <div className="login-container">
        <img className="login-logo" src={logo} alt="" />
        <Form
          validateTrigger={["onChange", "onBlur"]}
          autoComplete="off"
          size="large"
          onFinish={onFinish}
          initialValues={{
            mobile: "13911111111",
            code: "246810",
            isAgree: true,
          }}
        >
          <Form.Item
            name="mobile"
            rules={[
              {
                required: true,
                message: "请输入手机号!",
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "手机号格式错误！",
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              {
                required: true,
                message: "请输入验证码!",
              },
              {
                len: 6,
                message: "验证码长度为6个字符",
              },
            ]}
          >
            <Input prefix={<LockOutlined className="site-form-item-icon" />} />
          </Form.Item>
          <Form.Item>
            <Form.Item
              name="isAgree"
              valuePropName="checked"
              noStyle
              rules={[
                {
                  validator: (_, value) => {
                    if (value === true) return Promise.resolve();
                    else
                      return Promise.reject(new Error("请勾选我已阅读并同意"));
                  },
                },
              ]}
            >
              <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
